<template>
  <div id="__nuxt">
    <div id="__layout">
      <!-- <div>
        <div id="addressManage" class="floatLeft">

          <div class="floatLeft" style="width:100%">
            <div class="addressH font22"></div>
            <div id="addressManageN" class="addressManageN">
              <ul class="addressUl"></ul>
            </div>
            <div v-for="(item,index) in addrList" :key="index">
              <div>地址{{index}}</div>
              <div>{{ item.provinceName }}</div>
              <div>{{ item.cityName }}</div>
              <div>{{ item.areaName }}</div>
                                 <div>用户名:{{addressInfo.adrs.username}}</div>
              <div>手机号{{ item.adrs.phone }}</div>
              <div>详细地址:{{ item.adrs.address }}</div>
              <div>是否默认:{{ item.adrs.isDefault }}</div>
            </div>
            <div id="addressTiJ" to="/user/addressNew" class="font26" @click="fnToAddress()">添加新地址</div>
            <footer id="addressBaoc" class="font26"><span>保存更改</span></footer>
          </div>
        </div>
      </div> -->
      <!-- vant中数据  -->
      <!-- v-model="chosenAddressId" -->
      <van-address-list
        
        :list="list" 
        v-model="num"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
        
      >
      </van-address-list>
      <!--  @select="select" -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
import { AddressList } from "vant";
import {mapState,mapMutation} from 'vuex'
Vue.use(AddressList);
export default {
  data() {
    return {
      // addressInfo: { adrs: {} },
      isActive: true,
      addrList: [],
    
      // chosenAddressId: '1',
      list: [
     
      ],
      num:0
      

    };
  },
  computed: {
    ...mapState({
      addressInfo:state=>state.address.addressInfo
    })
  },
  async created () {
    
    this.list = await this.$store.state.address.addressInfo
    console.log(this.list);
  },
  methods: {
    fnToAddress() {
      this.$router.push({
        path: "/home/Address",
      });
    },
    onAdd() {
      this.$router.push({
        path: "/home/Address",
      });
      Toast("新增地址");
    },
    onEdit(item, index) {
     
      
      Toast("编辑地址:" + index);
      this.$store.state.selectedIndex = index;
       this.$router.push({
        path: "/home/DelectAdress",
      });
    },
    onSelect(item, index) {
      console.log(33333);
       Toast("选择:" + index);
        this.num = index
      // for(let i in this.list){
       
      //   this.list[i].isDefault=true;
        
      // }
      //  this.list[i].isDefault=false;
    },
    
  },
 mounted() {
    // this.addressInfo = this.$store.state.addr.addressInfo;
    // this.addrList = this.$store.state.addr.addrList;
    // console.log(this.addrList);
    // console.log(this.$store.state.addr.addressInfo);
    // window.app2 = this;


// ***************************
  // console.log(this.$store.state.addr.addrList);
  // let arr =  this.$store.state.addr.addrList
  // arr.forEach(v=>{
  //   // console.log(v);
  //   this.list.push(v)
  //   console.log(this.list);
  // })
  //   this.list.push()
  },
};
</script>

<style lang="scss" scoped>
@import url(../../assets/css/default.css);
.van-address-list{
  padding-top: 72px;
  
}

</style>
